-
Notifications
You must be signed in to change notification settings - Fork 26.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix hydration mismatch on href for url with anchor refs #21065
fix hydration mismatch on href for url with anchor refs #21065
Conversation
Stats from current PRDefault Server Mode (Increase detected
|
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
buildDuration | 8.9s | 8.4s | -495ms |
nodeModulesSize | 80.9 MB | 80.9 MB |
Page Load Tests Overall increase ✓
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
/ failed reqs | 0 | 0 | ✓ |
/ total time (seconds) | 1.729 | 1.738 | |
/ avg req/sec | 1445.91 | 1438.55 | |
/error-in-render failed reqs | 0 | 0 | ✓ |
/error-in-render total time (seconds) | 1.11 | 1.073 | -0.04 |
/error-in-render avg req/sec | 2252.24 | 2330.23 | +77.99 |
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
677f882d2ed8..b025.js gzip | 13.1 kB | 13.1 kB | |
framework.HASH.js gzip | 39 kB | 39 kB | ✓ |
main-e66dcae..6635.js gzip | 6.63 kB | 6.63 kB | ✓ |
webpack-50be..df5b.js gzip | 751 B | 751 B | ✓ |
Overall change | 59.4 kB | 59.4 kB |
Legacy Client Bundles (polyfills)
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
polyfills-81..14d7.js gzip | 31.2 kB | 31.2 kB | ✓ |
Overall change | 31.2 kB | 31.2 kB | ✓ |
Client Pages
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
_app-2a09aa2..4a98.js gzip | 1.28 kB | 1.28 kB | ✓ |
_error-8b758..aef6.js gzip | 3.46 kB | 3.46 kB | ✓ |
hooks-c71ae4..70cd.js gzip | 887 B | 887 B | ✓ |
index-bbee2f..528b.js gzip | 227 B | 227 B | ✓ |
link-7faf09b..eba4.js gzip | 1.64 kB | 1.64 kB | ✓ |
routerDirect..bf84.js gzip | 303 B | 303 B | ✓ |
withRouter-a..5826.js gzip | 302 B | 302 B | ✓ |
Overall change | 8.09 kB | 8.09 kB | ✓ |
Client Build Manifests
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
_buildManifest.js gzip | 321 B | 321 B | ✓ |
Overall change | 321 B | 321 B | ✓ |
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
index.html gzip | 615 B | 616 B | |
link.html gzip | 619 B | 621 B | |
withRouter.html gzip | 608 B | 608 B | ✓ |
Overall change | 1.84 kB | 1.84 kB |
Diffs
Diff for 677f882d2ed8..78884f33a.js
@@ -1303,7 +1303,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
*/
function isLocalURL(url) {
- if (url.startsWith("/")) return true;
+ // prevent a hydration mismatch on href for url with anchor refs
+ if (url.startsWith("/") || url.startsWith("#")) return true;
try {
// absolute urls can be local if they are on the same origin
Diff for index.html
@@ -22,7 +22,7 @@
/>
<link
rel="preload"
- href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+ href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
as="script"
/>
<link
@@ -65,7 +65,7 @@
async=""
></script>
<script
- src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+ src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
async=""
></script>
<script
Diff for link.html
@@ -22,7 +22,7 @@
/>
<link
rel="preload"
- href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+ href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
as="script"
/>
<link
@@ -70,7 +70,7 @@
async=""
></script>
<script
- src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+ src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
async=""
></script>
<script
Diff for withRouter.html
@@ -22,7 +22,7 @@
/>
<link
rel="preload"
- href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+ href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
as="script"
/>
<link
@@ -65,7 +65,7 @@
async=""
></script>
<script
- src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+ src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
async=""
></script>
<script
Serverless Mode (Increase detected ⚠️ )
General Overall increase ⚠️
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
buildDuration | 10.6s | 10.8s | |
nodeModulesSize | 80.9 MB | 80.9 MB |
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
677f882d2ed8..b025.js gzip | 13.1 kB | N/A | N/A |
framework.HASH.js gzip | 39 kB | 39 kB | ✓ |
main-e66dcae..6635.js gzip | 6.63 kB | 6.63 kB | ✓ |
webpack-50be..df5b.js gzip | 751 B | 751 B | ✓ |
677f882d2ed8..43e3.js gzip | N/A | 13.1 kB | N/A |
Overall change | 59.4 kB | 59.4 kB |
Legacy Client Bundles (polyfills)
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
polyfills-81..14d7.js gzip | 31.2 kB | 31.2 kB | ✓ |
Overall change | 31.2 kB | 31.2 kB | ✓ |
Client Pages
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
_app-2a09aa2..4a98.js gzip | 1.28 kB | 1.28 kB | ✓ |
_error-8b758..aef6.js gzip | 3.46 kB | 3.46 kB | ✓ |
hooks-c71ae4..70cd.js gzip | 887 B | 887 B | ✓ |
index-bbee2f..528b.js gzip | 227 B | 227 B | ✓ |
link-7faf09b..eba4.js gzip | 1.64 kB | 1.64 kB | ✓ |
routerDirect..bf84.js gzip | 303 B | 303 B | ✓ |
withRouter-a..5826.js gzip | 302 B | 302 B | ✓ |
Overall change | 8.09 kB | 8.09 kB | ✓ |
Client Build Manifests
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
_buildManifest.js gzip | 321 B | 321 B | ✓ |
Overall change | 321 B | 321 B | ✓ |
Serverless bundles Overall increase ⚠️
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
_error.js | 1 MB | 1 MB | ✓ |
404.html | 2.67 kB | 2.67 kB | ✓ |
hooks.html | 1.92 kB | 1.92 kB | ✓ |
index.js | 1 MB | 1 MB | ✓ |
link.js | 1.06 MB | 1.06 MB | |
routerDirect.js | 1.05 MB | 1.05 MB | |
withRouter.js | 1.05 MB | 1.05 MB | |
Overall change | 5.18 MB | 5.18 MB |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you add an integration test to test/integration
for this change?
Stats from current PRDefault Server Mode (Decrease detected ✓)General Overall increase
|
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
buildDuration | 8.6s | 8.6s | -32ms |
nodeModulesSize | 77.5 MB | 77.5 MB |
Page Load Tests Overall decrease ⚠️
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
/ failed reqs | 0 | 0 | ✓ |
/ total time (seconds) | 1.698 | 1.705 | |
/ avg req/sec | 1472.75 | 1466.04 | |
/error-in-render failed reqs | 0 | 0 | ✓ |
/error-in-render total time (seconds) | 1.047 | 1.07 | |
/error-in-render avg req/sec | 2387.46 | 2335.85 |
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
677f882d2ed8..b025.js gzip | 13.1 kB | 13.1 kB | |
framework.HASH.js gzip | 39 kB | 39 kB | ✓ |
main-9d28255..78cd.js gzip | 6.63 kB | 6.63 kB | ✓ |
webpack-50be..df5b.js gzip | 751 B | 751 B | ✓ |
Overall change | 59.4 kB | 59.4 kB |
Legacy Client Bundles (polyfills)
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
polyfills-af..9390.js gzip | 31.3 kB | 31.3 kB | ✓ |
Overall change | 31.3 kB | 31.3 kB | ✓ |
Client Pages
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
_app-2a09aa2..4a98.js gzip | 1.28 kB | 1.28 kB | ✓ |
_error-8b758..aef6.js gzip | 3.46 kB | 3.46 kB | ✓ |
hooks-c71ae4..70cd.js gzip | 887 B | 887 B | ✓ |
index-bbee2f..528b.js gzip | 227 B | 227 B | ✓ |
link-7faf09b..eba4.js gzip | 1.64 kB | 1.64 kB | ✓ |
routerDirect..bf84.js gzip | 303 B | 303 B | ✓ |
withRouter-a..5826.js gzip | 302 B | 302 B | ✓ |
Overall change | 8.09 kB | 8.09 kB | ✓ |
Client Build Manifests
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
_buildManifest.js gzip | 321 B | 321 B | ✓ |
Overall change | 321 B | 321 B | ✓ |
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
index.html gzip | 614 B | 615 B | |
link.html gzip | 620 B | 621 B | |
withRouter.html gzip | 608 B | 609 B | |
Overall change | 1.84 kB | 1.84 kB |
Diffs
Diff for 677f882d2ed8..78884f33a.js
@@ -1303,7 +1303,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
*/
function isLocalURL(url) {
- if (url.startsWith("/")) return true;
+ // prevent a hydration mismatch on href for url with anchor refs
+ if (url.startsWith("/") || url.startsWith("#")) return true;
try {
// absolute urls can be local if they are on the same origin
Diff for index.html
@@ -22,7 +22,7 @@
/>
<link
rel="preload"
- href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+ href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
as="script"
/>
<link
@@ -65,7 +65,7 @@
async=""
></script>
<script
- src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+ src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
async=""
></script>
<script
Diff for link.html
@@ -22,7 +22,7 @@
/>
<link
rel="preload"
- href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+ href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
as="script"
/>
<link
@@ -70,7 +70,7 @@
async=""
></script>
<script
- src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+ src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
async=""
></script>
<script
Diff for withRouter.html
@@ -22,7 +22,7 @@
/>
<link
rel="preload"
- href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+ href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
as="script"
/>
<link
@@ -65,7 +65,7 @@
async=""
></script>
<script
- src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+ src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
async=""
></script>
<script
Serverless Mode (Increase detected ⚠️ )
General Overall increase ⚠️
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
buildDuration | 10.1s | 10.5s | |
nodeModulesSize | 77.5 MB | 77.5 MB |
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
677f882d2ed8..b025.js gzip | 13.1 kB | N/A | N/A |
framework.HASH.js gzip | 39 kB | 39 kB | ✓ |
main-9d28255..78cd.js gzip | 6.63 kB | 6.63 kB | ✓ |
webpack-50be..df5b.js gzip | 751 B | 751 B | ✓ |
677f882d2ed8..43e3.js gzip | N/A | 13.1 kB | N/A |
Overall change | 59.4 kB | 59.4 kB |
Legacy Client Bundles (polyfills)
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
polyfills-af..9390.js gzip | 31.3 kB | 31.3 kB | ✓ |
Overall change | 31.3 kB | 31.3 kB | ✓ |
Client Pages
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
_app-2a09aa2..4a98.js gzip | 1.28 kB | 1.28 kB | ✓ |
_error-8b758..aef6.js gzip | 3.46 kB | 3.46 kB | ✓ |
hooks-c71ae4..70cd.js gzip | 887 B | 887 B | ✓ |
index-bbee2f..528b.js gzip | 227 B | 227 B | ✓ |
link-7faf09b..eba4.js gzip | 1.64 kB | 1.64 kB | ✓ |
routerDirect..bf84.js gzip | 303 B | 303 B | ✓ |
withRouter-a..5826.js gzip | 302 B | 302 B | ✓ |
Overall change | 8.09 kB | 8.09 kB | ✓ |
Client Build Manifests
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
_buildManifest.js gzip | 321 B | 321 B | ✓ |
Overall change | 321 B | 321 B | ✓ |
Serverless bundles Overall increase ⚠️
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
_error.js | 1 MB | 1 MB | ✓ |
404.html | 2.67 kB | 2.67 kB | ✓ |
hooks.html | 1.92 kB | 1.92 kB | ✓ |
index.js | 1 MB | 1 MB | ✓ |
link.js | 1.06 MB | 1.06 MB | |
routerDirect.js | 1.05 MB | 1.05 MB | |
withRouter.js | 1.05 MB | 1.05 MB | |
Overall change | 5.18 MB | 5.18 MB |
@timneutkens |
const runTests = () => { | ||
it('should not have hydration mis-match for hash link', async () => { | ||
const browser = await webdriver(appPort, '/') | ||
const caughtErrors = await browser.eval(`window.caughtErrors`) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can read browser logs directly from webdriver:
browser = await webdriver(appPort, '/development-logs')
const browserLogs = await browser.log('browser')
let found = false
browserLogs.forEach((log) => {
if (log.message.includes('Next.js auto-prefetches automatically')) {
found = true
}
})
Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
Thanks! |
Stats from current PRDefault Server Mode (Increase detected
|
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
buildDuration | 10.5s | 10.8s | |
nodeModulesSize | 77.5 MB | 77.5 MB |
Page Load Tests Overall increase ✓
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
/ failed reqs | 0 | 0 | ✓ |
/ total time (seconds) | 2.088 | 2.04 | -0.05 |
/ avg req/sec | 1197.26 | 1225.44 | +28.18 |
/error-in-render failed reqs | 0 | 0 | ✓ |
/error-in-render total time (seconds) | 1.331 | 1.304 | -0.03 |
/error-in-render avg req/sec | 1877.61 | 1917.24 | +39.63 |
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
677f882d2ed8..b025.js gzip | 13.1 kB | 13.1 kB | |
framework.HASH.js gzip | 39 kB | 39 kB | ✓ |
main-b70be25..6967.js gzip | 6.63 kB | 6.63 kB | ✓ |
webpack-50be..df5b.js gzip | 751 B | 751 B | ✓ |
Overall change | 59.4 kB | 59.4 kB |
Legacy Client Bundles (polyfills)
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
polyfills-af..9390.js gzip | 31.3 kB | 31.3 kB | ✓ |
Overall change | 31.3 kB | 31.3 kB | ✓ |
Client Pages
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
_app-2a09aa2..4a98.js gzip | 1.28 kB | 1.28 kB | ✓ |
_error-8b758..aef6.js gzip | 3.46 kB | 3.46 kB | ✓ |
hooks-c71ae4..70cd.js gzip | 887 B | 887 B | ✓ |
index-bbee2f..528b.js gzip | 227 B | 227 B | ✓ |
link-7faf09b..eba4.js gzip | 1.64 kB | 1.64 kB | ✓ |
routerDirect..bf84.js gzip | 303 B | 303 B | ✓ |
withRouter-a..5826.js gzip | 302 B | 302 B | ✓ |
Overall change | 8.09 kB | 8.09 kB | ✓ |
Client Build Manifests
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
_buildManifest.js gzip | 321 B | 321 B | ✓ |
Overall change | 321 B | 321 B | ✓ |
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
index.html gzip | 613 B | 615 B | |
link.html gzip | 619 B | 620 B | |
withRouter.html gzip | 608 B | 608 B | ✓ |
Overall change | 1.84 kB | 1.84 kB |
Diffs
Diff for 677f882d2ed8..78884f33a.js
@@ -1303,7 +1303,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
*/
function isLocalURL(url) {
- if (url.startsWith("/")) return true;
+ // prevent a hydration mismatch on href for url with anchor refs
+ if (url.startsWith("/") || url.startsWith("#")) return true;
try {
// absolute urls can be local if they are on the same origin
Diff for index.html
@@ -22,7 +22,7 @@
/>
<link
rel="preload"
- href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+ href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
as="script"
/>
<link
@@ -65,7 +65,7 @@
async=""
></script>
<script
- src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+ src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
async=""
></script>
<script
Diff for link.html
@@ -22,7 +22,7 @@
/>
<link
rel="preload"
- href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+ href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
as="script"
/>
<link
@@ -70,7 +70,7 @@
async=""
></script>
<script
- src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+ src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
async=""
></script>
<script
Diff for withRouter.html
@@ -22,7 +22,7 @@
/>
<link
rel="preload"
- href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+ href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
as="script"
/>
<link
@@ -65,7 +65,7 @@
async=""
></script>
<script
- src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+ src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
async=""
></script>
<script
Serverless Mode (Increase detected ⚠️ )
General Overall increase ⚠️
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
buildDuration | 12.8s | 12.7s | -15ms |
nodeModulesSize | 77.5 MB | 77.5 MB |
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
677f882d2ed8..b025.js gzip | 13.1 kB | N/A | N/A |
framework.HASH.js gzip | 39 kB | 39 kB | ✓ |
main-b70be25..6967.js gzip | 6.63 kB | 6.63 kB | ✓ |
webpack-50be..df5b.js gzip | 751 B | 751 B | ✓ |
677f882d2ed8..43e3.js gzip | N/A | 13.1 kB | N/A |
Overall change | 59.4 kB | 59.4 kB |
Legacy Client Bundles (polyfills)
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
polyfills-af..9390.js gzip | 31.3 kB | 31.3 kB | ✓ |
Overall change | 31.3 kB | 31.3 kB | ✓ |
Client Pages
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
_app-2a09aa2..4a98.js gzip | 1.28 kB | 1.28 kB | ✓ |
_error-8b758..aef6.js gzip | 3.46 kB | 3.46 kB | ✓ |
hooks-c71ae4..70cd.js gzip | 887 B | 887 B | ✓ |
index-bbee2f..528b.js gzip | 227 B | 227 B | ✓ |
link-7faf09b..eba4.js gzip | 1.64 kB | 1.64 kB | ✓ |
routerDirect..bf84.js gzip | 303 B | 303 B | ✓ |
withRouter-a..5826.js gzip | 302 B | 302 B | ✓ |
Overall change | 8.09 kB | 8.09 kB | ✓ |
Client Build Manifests
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
_buildManifest.js gzip | 321 B | 321 B | ✓ |
Overall change | 321 B | 321 B | ✓ |
Serverless bundles Overall increase ⚠️
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
_error.js | 1 MB | 1 MB | ✓ |
404.html | 2.67 kB | 2.67 kB | ✓ |
hooks.html | 1.92 kB | 1.92 kB | ✓ |
index.js | 1 MB | 1 MB | ✓ |
link.js | 1.06 MB | 1.06 MB | |
routerDirect.js | 1.05 MB | 1.05 MB | |
withRouter.js | 1.05 MB | 1.05 MB | |
Overall change | 5.18 MB | 5.18 MB |
Looks like linting is not passing 👀 |
Stats from current PRDefault Server Mode (Decrease detected ✓)General Overall increase
|
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
buildDuration | 9.9s | 10s | |
nodeModulesSize | 77.5 MB | 77.5 MB |
Page Load Tests Overall decrease ⚠️
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
/ failed reqs | 0 | 0 | ✓ |
/ total time (seconds) | 2 | 1.984 | -0.02 |
/ avg req/sec | 1250.16 | 1260 | +9.84 |
/error-in-render failed reqs | 0 | 0 | ✓ |
/error-in-render total time (seconds) | 1.249 | 1.258 | |
/error-in-render avg req/sec | 2001.23 | 1986.78 |
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
677f882d2ed8..b025.js gzip | 13.1 kB | 13.1 kB | |
framework.HASH.js gzip | 39 kB | 39 kB | ✓ |
main-b70be25..6967.js gzip | 6.63 kB | 6.63 kB | ✓ |
webpack-50be..df5b.js gzip | 751 B | 751 B | ✓ |
Overall change | 59.4 kB | 59.4 kB |
Legacy Client Bundles (polyfills)
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
polyfills-af..9390.js gzip | 31.3 kB | 31.3 kB | ✓ |
Overall change | 31.3 kB | 31.3 kB | ✓ |
Client Pages
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
_app-2a09aa2..4a98.js gzip | 1.28 kB | 1.28 kB | ✓ |
_error-8b758..aef6.js gzip | 3.46 kB | 3.46 kB | ✓ |
hooks-c71ae4..70cd.js gzip | 887 B | 887 B | ✓ |
index-bbee2f..528b.js gzip | 227 B | 227 B | ✓ |
link-7faf09b..eba4.js gzip | 1.64 kB | 1.64 kB | ✓ |
routerDirect..bf84.js gzip | 303 B | 303 B | ✓ |
withRouter-a..5826.js gzip | 302 B | 302 B | ✓ |
Overall change | 8.09 kB | 8.09 kB | ✓ |
Client Build Manifests
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
_buildManifest.js gzip | 321 B | 321 B | ✓ |
Overall change | 321 B | 321 B | ✓ |
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
index.html gzip | 613 B | 615 B | |
link.html gzip | 619 B | 620 B | |
withRouter.html gzip | 608 B | 608 B | ✓ |
Overall change | 1.84 kB | 1.84 kB |
Diffs
Diff for 677f882d2ed8..78884f33a.js
@@ -1303,7 +1303,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
*/
function isLocalURL(url) {
- if (url.startsWith("/")) return true;
+ // prevent a hydration mismatch on href for url with anchor refs
+ if (url.startsWith("/") || url.startsWith("#")) return true;
try {
// absolute urls can be local if they are on the same origin
Diff for index.html
@@ -22,7 +22,7 @@
/>
<link
rel="preload"
- href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+ href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
as="script"
/>
<link
@@ -65,7 +65,7 @@
async=""
></script>
<script
- src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+ src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
async=""
></script>
<script
Diff for link.html
@@ -22,7 +22,7 @@
/>
<link
rel="preload"
- href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+ href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
as="script"
/>
<link
@@ -70,7 +70,7 @@
async=""
></script>
<script
- src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+ src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
async=""
></script>
<script
Diff for withRouter.html
@@ -22,7 +22,7 @@
/>
<link
rel="preload"
- href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+ href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
as="script"
/>
<link
@@ -65,7 +65,7 @@
async=""
></script>
<script
- src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+ src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
async=""
></script>
<script
Serverless Mode (Increase detected ⚠️ )
General Overall increase ⚠️
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
buildDuration | 11.7s | 11.5s | -211ms |
nodeModulesSize | 77.5 MB | 77.5 MB |
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
677f882d2ed8..b025.js gzip | 13.1 kB | N/A | N/A |
framework.HASH.js gzip | 39 kB | 39 kB | ✓ |
main-b70be25..6967.js gzip | 6.63 kB | 6.63 kB | ✓ |
webpack-50be..df5b.js gzip | 751 B | 751 B | ✓ |
677f882d2ed8..43e3.js gzip | N/A | 13.1 kB | N/A |
Overall change | 59.4 kB | 59.4 kB |
Legacy Client Bundles (polyfills)
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
polyfills-af..9390.js gzip | 31.3 kB | 31.3 kB | ✓ |
Overall change | 31.3 kB | 31.3 kB | ✓ |
Client Pages
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
_app-2a09aa2..4a98.js gzip | 1.28 kB | 1.28 kB | ✓ |
_error-8b758..aef6.js gzip | 3.46 kB | 3.46 kB | ✓ |
hooks-c71ae4..70cd.js gzip | 887 B | 887 B | ✓ |
index-bbee2f..528b.js gzip | 227 B | 227 B | ✓ |
link-7faf09b..eba4.js gzip | 1.64 kB | 1.64 kB | ✓ |
routerDirect..bf84.js gzip | 303 B | 303 B | ✓ |
withRouter-a..5826.js gzip | 302 B | 302 B | ✓ |
Overall change | 8.09 kB | 8.09 kB | ✓ |
Client Build Manifests
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
_buildManifest.js gzip | 321 B | 321 B | ✓ |
Overall change | 321 B | 321 B | ✓ |
Serverless bundles Overall increase ⚠️
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
_error.js | 1 MB | 1 MB | ✓ |
404.html | 2.67 kB | 2.67 kB | ✓ |
hooks.html | 1.92 kB | 1.92 kB | ✓ |
index.js | 1 MB | 1 MB | ✓ |
link.js | 1.06 MB | 1.06 MB | |
routerDirect.js | 1.05 MB | 1.05 MB | |
withRouter.js | 1.05 MB | 1.05 MB | |
Overall change | 5.18 MB | 5.18 MB |
@timneutkens |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, thanks! 💯
55d6c57
to
c2f27b8
Compare
Stats from current PRDefault Server Mode (Decrease detected ✓)General Overall increase
|
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
buildDuration | 9.8s | 10s | |
nodeModulesSize | 77.5 MB | 77.5 MB |
Page Load Tests Overall decrease ⚠️
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
/ failed reqs | 0 | 0 | ✓ |
/ total time (seconds) | 1.932 | 1.925 | -0.01 |
/ avg req/sec | 1293.8 | 1298.8 | +5 |
/error-in-render failed reqs | 0 | 0 | ✓ |
/error-in-render total time (seconds) | 1.168 | 1.229 | |
/error-in-render avg req/sec | 2140.11 | 2034.81 |
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
677f882d2ed8..b025.js gzip | 13.1 kB | 13.1 kB | |
framework.HASH.js gzip | 39 kB | 39 kB | ✓ |
main-b70be25..6967.js gzip | 6.63 kB | 6.63 kB | ✓ |
webpack-50be..df5b.js gzip | 751 B | 751 B | ✓ |
Overall change | 59.4 kB | 59.4 kB |
Legacy Client Bundles (polyfills)
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
polyfills-af..9390.js gzip | 31.3 kB | 31.3 kB | ✓ |
Overall change | 31.3 kB | 31.3 kB | ✓ |
Client Pages
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
_app-2a09aa2..4a98.js gzip | 1.28 kB | 1.28 kB | ✓ |
_error-8b758..aef6.js gzip | 3.46 kB | 3.46 kB | ✓ |
hooks-c71ae4..70cd.js gzip | 887 B | 887 B | ✓ |
index-bbee2f..528b.js gzip | 227 B | 227 B | ✓ |
link-7faf09b..eba4.js gzip | 1.64 kB | 1.64 kB | ✓ |
routerDirect..bf84.js gzip | 303 B | 303 B | ✓ |
withRouter-a..5826.js gzip | 302 B | 302 B | ✓ |
Overall change | 8.09 kB | 8.09 kB | ✓ |
Client Build Manifests
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
_buildManifest.js gzip | 321 B | 321 B | ✓ |
Overall change | 321 B | 321 B | ✓ |
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
index.html gzip | 613 B | 615 B | |
link.html gzip | 619 B | 620 B | |
withRouter.html gzip | 608 B | 608 B | ✓ |
Overall change | 1.84 kB | 1.84 kB |
Diffs
Diff for 677f882d2ed8..78884f33a.js
@@ -1303,7 +1303,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
*/
function isLocalURL(url) {
- if (url.startsWith("/")) return true;
+ // prevent a hydration mismatch on href for url with anchor refs
+ if (url.startsWith("/") || url.startsWith("#")) return true;
try {
// absolute urls can be local if they are on the same origin
Diff for index.html
@@ -22,7 +22,7 @@
/>
<link
rel="preload"
- href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+ href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
as="script"
/>
<link
@@ -65,7 +65,7 @@
async=""
></script>
<script
- src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+ src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
async=""
></script>
<script
Diff for link.html
@@ -22,7 +22,7 @@
/>
<link
rel="preload"
- href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+ href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
as="script"
/>
<link
@@ -70,7 +70,7 @@
async=""
></script>
<script
- src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+ src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
async=""
></script>
<script
Diff for withRouter.html
@@ -22,7 +22,7 @@
/>
<link
rel="preload"
- href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+ href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
as="script"
/>
<link
@@ -65,7 +65,7 @@
async=""
></script>
<script
- src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.a45bac3e08278884f33a.js"
+ src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.68413f75a18d3759e1c6.js"
async=""
></script>
<script
Serverless Mode (Increase detected ⚠️ )
General Overall increase ⚠️
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
buildDuration | 11.4s | 11.9s | |
nodeModulesSize | 77.5 MB | 77.5 MB |
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
677f882d2ed8..b025.js gzip | 13.1 kB | N/A | N/A |
framework.HASH.js gzip | 39 kB | 39 kB | ✓ |
main-b70be25..6967.js gzip | 6.63 kB | 6.63 kB | ✓ |
webpack-50be..df5b.js gzip | 751 B | 751 B | ✓ |
677f882d2ed8..43e3.js gzip | N/A | 13.1 kB | N/A |
Overall change | 59.4 kB | 59.4 kB |
Legacy Client Bundles (polyfills)
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
polyfills-af..9390.js gzip | 31.3 kB | 31.3 kB | ✓ |
Overall change | 31.3 kB | 31.3 kB | ✓ |
Client Pages
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
_app-2a09aa2..4a98.js gzip | 1.28 kB | 1.28 kB | ✓ |
_error-8b758..aef6.js gzip | 3.46 kB | 3.46 kB | ✓ |
hooks-c71ae4..70cd.js gzip | 887 B | 887 B | ✓ |
index-bbee2f..528b.js gzip | 227 B | 227 B | ✓ |
link-7faf09b..eba4.js gzip | 1.64 kB | 1.64 kB | ✓ |
routerDirect..bf84.js gzip | 303 B | 303 B | ✓ |
withRouter-a..5826.js gzip | 302 B | 302 B | ✓ |
Overall change | 8.09 kB | 8.09 kB | ✓ |
Client Build Manifests
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
_buildManifest.js gzip | 321 B | 321 B | ✓ |
Overall change | 321 B | 321 B | ✓ |
Serverless bundles Overall increase ⚠️
vercel/next.js canary | kaykdm/next.js fix/hydration-mismatch-href | Change | |
---|---|---|---|
_error.js | 1 MB | 1 MB | ✓ |
404.html | 2.67 kB | 2.67 kB | ✓ |
hooks.html | 1.92 kB | 1.92 kB | ✓ |
index.js | 1 MB | 1 MB | ✓ |
link.js | 1.06 MB | 1.06 MB | |
routerDirect.js | 1.05 MB | 1.05 MB | |
withRouter.js | 1.05 MB | 1.05 MB | |
Overall change | 5.18 MB | 5.18 MB |
const browserLogs = await browser.log('browser') | ||
let found = false | ||
browserLogs.forEach((log) => { | ||
if (log.message.includes('Warning: Prop')) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi, this warning won't show in production mode so we don't need to test that, we could add this check to the client-navigation suite here using the /nav/hash-changes
page to keep the test related to that. The check looks good besides that!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@ijjk (cc: @timneutkens )
Hi, thanks for the review!
You are right that this warning does not show in production.
I was not sure where to put this test, so I created new one. Adding this check to the client-navigation suite using the /nav/hash-changes
makes sense to me.
Since this PR is merged, should I make an another PR to apply your suggestion?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If you'd like to create another PR updating the test that would be awesome!
In this [PR](#21065), it was suggested to move the test suite, but it was merged before fixing. This is the fix for that, moving link-with-hash test suite to client-navigation suite detail: https://github.com/vercel/next.js/pull/21065/files#r558425551
Fixes: #20624
This PR fixes hydration mismatch on
<Link >
with anchor refs.Since only client side is prefixed with / when you use Link with hash like this
<Link href="#hash" />
, this will make sure that it is also prefixed in server side.